<template>
  <div>
    <div class="map-menu">
      <ul>
        <li v-if="data.title">
          <span @click="subShow(data.title)">{{data.title}}<i v-bind:class="[ isActive ? 'iconfont-icon-up' : 'iconfont-icon-down']"></i></span>
          <ul class="sub-menu"
              v-if="data.contents"
              v-bind:style="{display: isActive ? 'block' : 'none'}">
            <li v-for="item in data.contents"
                :key="item.name">
              <a @click="getRoute(item.path)">{{item.name}}</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import { mapMutations } from 'vuex'
  export default {
    props: {
      data: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    inject: ['side'],
    computed: {
      isActive () {
        if (this.data.title && this.side.activeName.indexOf(this.data.title) > -1) {
          return true
        }
        return false
      }
    },
    created () {
      this.getData()
    },
    methods: {
      ...mapMutations([
        'UPDATE_CURRENT'
      ]),
      getRoute (path) { //设置路由
        this.UPDATE_CURRENT(path)
        this.$router.push(path)
      },
      subShow (name) { //菜单点击事件
        this.$emit('itemClick', name)
      },
      getData () { // 数据类型判断
        if (!(this.data instanceof Object)) {
          if (typeof this.data === 'string') { // json字符串转换
            this.data = JSON.parse(this.data)
          }
        }
        if (!(this.data.contents instanceof Array)) {
          console.error('子内容contents不是数组!')
        }
      }
    }
  }
</script>
<style scoped>
  .map-menu {
    height: 100%;
    overflow: hidden;
  }
  .search-box {
    margin: 20px 0;
  }
  .map-menu ul {
    list-style: none;
    margin-bottom: 10px;
    margin-top: 5px;
  }
  .map-menu ul li {
    display: list-item;
    text-align: left;
  }
  .map-menu span {
    font-size: 14px;
    color: #586069;
    cursor: pointer;
    margin: 10px 0 5px;
    position: relative;
    display: block;
  }
  .sub-menu li a {
    padding-left: 25px;
    outline: 0;
  }
  a:hover {
    color: #1981ff;
  }
  .sub-menu {
    list-style: none;
    line-height: 27px;
  }
  .sub-menu li {
    font-size: 12px;
    line-height: 27px;
  }
  .iconfont-icon-up {
    right: 0px;
    height: 20px;
    font-size: 12px;
    outline: 0;
    padding: 0 0 0 20px;
    background: url("../assets/uparrow.png") 8px center no-repeat;
    background-size: 8px auto;
    position: absolute;
  }
  .iconfont-icon-down {
    right: 0px;
    height: 13px;
    font-size: 12px;
    outline: 0;
    padding: 0 0 0 20px;
    background: url("../assets/downarrow.png") 8px center no-repeat;
    background-size: 8px auto;
    position: absolute;
  }
</style>
